<template>
	<view class="bg">
		<u-navbar :is-back="true" title="动态详情"></u-navbar>
		<view class="page-box">
			<view class="info-head">
				<u-avatar :src="dynamic.reportAvatar" size="70" mode="square"></u-avatar>
				<view class="name-time">
					<view class="name">{{ dynamic.reportName }}</view>
					<view class="info-time">{{ dynamic.time }}</view>
				</view>
			</view>
			<view class="info">
				<view class="info-text"><rich-text :nodes="dynamic.content"></rich-text></view>
				<view v-if="dynamic.picture1 != null">
					<u-parse :html="imgSrcText"></u-parse>
					<!-- <image height="300" width="400" :src="dynamic.picture1" mode="aspectFit"></image> -->
				</view>
			</view>
			<view class="info-bottom">
				<!-- <view class="thumb">
					<u-icon
						name="thumb-up"
						size="40"
						@click="thumbClick()"
						:class="{ 'thumb-active': thumbStatus[dynamic.id] }"
					></u-icon>
					<view class="thumbnum">{{ dynamic.thumbNum }}</view>
				</view>

				<u-icon name="chat" size="40" @click="showInput = !showInput"></u-icon> -->
			</view>
			<view v-if="dynamic.comments && dynamic.comments.length > 0">
				<view class="comment" v-for="(com, idx) in dynamic.comments" :key="idx">
					<span class="com-name" v-if="type == 'cheer'">
						<!-- <u-avatar :src="com.commentatorAvatar" size="70" mode="circle"></u-avatar> -->
						{{ com.commentatorName }}:
					</span>
					<span v-else-if="type == 'anonymous'">匿名:</span>
					{{ com.content }}
				</view>
			</view>
			<!-- <view v-if="showInput == true"> -->
			<view>
				<u-field v-model="inputValue" label-width="0" placeholder="请输入评论" :focus="focus" class="comment-input">
					<u-button size="mini" slot="right" type="primary" @click="sendComment()">确定</u-button>
				</u-field>
			</view>
		</view>
	</view>
</template>

<script>
import { parseTime } from '../../utils/nowTime.js';
export default {
	data() {
		return {
			user: {},
			info: {},
			type: '',
			dynamicId: -1,
			dynamic: {},
			showInput: false,
			inputValue: '',
			focus: false,
			thumbStatus: {},
			imgSrcText: ''
		};
	},
	async onLoad(option) {
		console.log('option', option);
		this.dynamicId = option.dynamicId;
		this.type = option.type;
		this.user = JSON.parse(JSON.stringify(this.$store.getters.getStorageUser));
		let dynamic = {};
		if (this.type == 'cheer') {
			dynamic = await this.$u.api.queryCheerMoment(this.dynamicId);
		} else if (this.type == 'anonymous') {
			dynamic = await this.$u.api.queryAnonymousMoment(this.dynamicId);
			// dynamic.rows[0].commentatorName = '匿名';
			dynamic.rows[0].reportAvatar =
				'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1305454818,873736954&fm=26&gp=0.jpg';
			dynamic.rows[0].reportName = '匿名';
		}
		this.addPrev(dynamic.rows);
		this.addPrev(dynamic.rows[0].comments);
		this.dynamic = dynamic.rows[0];
		this.imgSrcText = `<img src="${this.dynamic.picture1}">`;
		console.log('dynamic', this.dynamic);
	},
	methods: {
		addPrev(dataList) {
			dataList.forEach(item => {
				if (item.time) {
					item.time = parseTime(item.time);
				}

				if (item.reportAvatar && this.type != 'anonymous') {
					item.reportAvatar = this.$store.state.projectIp + item.reportAvatar;
				}
				if (item.picture1) {
					item.picture1 = this.$store.state.projectIp + item.picture1;
				}
				if (item.commentatorAvatar) {
					item.commentatorAvatar = this.$store.state.projectIp + item.commentatorAvatar;
				}
			});
		},
		async sendComment() {
			console.log('send comment');
			if (this.inputValue == '') return;
			let param = {
				momentId: this.dynamic.id,
				content: this.inputValue,
				fromId: this.user.userId
			};

			let res = await this.$u.api.addCheerComment(param);
			console.log('comment res', res);
			this.dynamic.comments.push({
				commentatorName: this.user.nickName,
				content: this.inputValue
			});
			this.dynamic.commentNum++;
			this.inputValue = '';
			// this.showInput = false
		},
		async thumbClick() {
			console.log('thumb-click', this.dynamic, this.thumbStatus);
			console.log('user:', this.user);
			let param = {
				momentId: this.dynamic.id,
				thumbedId: this.user.userId
			};
			// let isClick = false;
			// console.log('item thumbs all', this.dynamic.thumbs.length, this.user.userId);
			// if (this.dynamic.thumbs.length > 0) {
			// 	for (let i = 0; i < this.dynamic.thumbs.length; i++) {
			// 		console.log('item thumbs', this.dynamic.thumbs[i].thumbedId, this.user.userId);
			// 		if (this.dynamic.thumbs[i].thumbedId == this.user.userId) {
			// 			isClick = true;
			// 		}
			// 	}
			// }
			// if (isClick) {
			// 	console.log('thumb-click-have');
			// 	// 以任务id为唯一标识
			// 	this.thumbStatus[this.dynamic.id] = false;
			// 	for (let i = 0; i < this.dynamic.thumbs.length; i++) {
			// 		if (this.dynamic.thumbs[i].thumbedId == this.user.userId) {
			// 			this.dynamic.thumbs.splice(i, 1);
			// 			this.dynamic.thumbNum--;
			// 		}
			// 	}
			// 	this.thumbStatus = Object.assign({}, this.thumbStatus);
			// 	let res = await this.$u.api.delCheerMomentThumb(param);
			// 	console.log('res-have', res);
			// } else {
			// 	console.log('res-no');
			// 	this.thumbStatus[this.dynamic.id] = true;
			// 	this.dynamic.thumbNum++;
			// 	this.dynamic.thumbs.push({ thumbedId: this.user.userId, thumbedName: this.user.nickName });
			// 	this.thumbStatus = Object.assign({}, this.thumbStatus);
			// 	let res = await this.$u.api.clickCheerMomentThumb(param);
			// 	console.log('res-no', res);
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
.bg {
	background-color: rgba($color: #f2f2f2, $alpha: 1);
	height: 100vh;
}
.page-box {
	width: 96vw;
	margin: 2vh 2vw;
	padding: 10rpx;
	background-color: #fff;
	border-radius: 20rpx;

	.info-head {
		// margin: 10rpx;
		// border-bottom: solid 1px #f9eeff;
		display: flex;
		align-dynamics: center;
		.name-time {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.name {
			}
			.info-time {
				font-size: 0.8em;
			}
		}
	}

	.info {
		// background-color: rgba(255, 253, 254, 0.8);
		.info-text {
			margin: 10rpx 0;
		}
		// border-bottom: solid 1px #f9eeff;
	}

	.info-bottom {
		display: flex;
		align-dynamics: center;
		justify-content: flex-end;
		padding: 15rpx 20rpx;
		border-bottom: 2px solid #f9eeff;
		.thumb {
			display: flex;
			align-dynamics: center;
			justify-content: center;
			margin: 0 10rpx;
		}

		.thumbnum {
			margin: 0 0 0 5rpx;
			font-size: 5rpx;
		}
	}

	.comment {
		// border: solid 1px #007AFF;
		margin: 10rpx 0;
		.com-name {
			color: #295c9d;
			margin: 0 10rpx 0 0;
		}
	}
	.comment-input {
	}
}
.thumb-active {
	color: #007aff;
}
</style>
